<!--suppress ALL -->
<template>
  <el-container style="height: 768px; border: 1px solid #eee">
    <!-- 多级菜单 -->
    <el-aside width="200px" style="background-color: rgb(238, 241, 246)" >
      <!-- 这里el-menu定义了当前的导航菜单及属性 -->
      <el-menu
        router
        :default-active="$route.path"
        class="el-manager">
        <el-submenu index="1">
          <template slot="title">
            <i class="el-icon-s-platform"></i>
            <span slot="title">设备管理</span>
          </template>
          <el-menu-item-group>
            <el-menu-item @click="list1" i class="el-icon-notebook-2">{{"\xa0\xa0"}}设备列表</el-menu-item>
            <el-menu-item @click="list2" i class="el-icon-setting">{{"\xa0\xa0"}}设备设置</el-menu-item>
          </el-menu-item-group>
        </el-submenu>
      </el-menu>
    </el-aside>

    <el-container direction="vertical">
      <div class="jump2list" id="deviceList" :style="display1" >
        <!--        设备情况概览   -->
        <div class="profile">
          <div class="item">
            <div class="small">总设备数</div>
            <div class="strong">{{devicesNum.alldevice}}台</div>
          </div>
          <div class="item">
            <div class="small">离线设备</div>
            <div class="strong">{{devicesNum.offlinedevice}}台</div>
          </div>
          <div class="item">
            <div class="small">在线设备</div>
            <div class="strong">{{devicesNum.alldevice}}台</div>
          </div>
        </div>
        <!--    添加设备按钮      -->
        <div class="btnadd">
          <el-button type="primary" @click="addModal=true">添加设备</el-button>
        </div>
        <!--     设备列表     -->
        <el-table
          :data="devicelist.slice((currentPage-1)*pagesize,currentPage*pagesize)"
          :stripe="stripe"
          border
          :key="devicelist"
          :current-page.sync="currentPage"
          style="width: 100%"
        >
          <el-table-column
            prop="deviceId"
            label="设备编号"
           >
          </el-table-column>
          <el-table-column
            prop="deviceName"
            label="设备名称"
            min-width="100px"
            >
          </el-table-column>
          <el-table-column
            prop="deviceCategory"
            label="设备类型"
            min-width="100px"
            >
          </el-table-column>
          <el-table-column
            prop="devicePriority"
            label="设备优先级"
            min-width="100px"
            >
          </el-table-column>
          <el-table-column
            prop="deviceStatus"
            label="设备状态"
            min-width="100px"
            >
          </el-table-column>
          <el-table-column
            prop="uuid"
            label="任务号"
            min-width="170px"
          >
          </el-table-column>
          <el-table-column fixed="right" label="操作" width="150px">
            <template slot-scope= "scope">
              <el-button
                @click="handleDelete(scope.$index, scope.row)"
                size="mini"
                type="danger"
              >删除
              </el-button>
              <el-button
                @click="handleStop(scope.$index, scope.row)"
                size="mini"
                type="danger">停止
              </el-button>
            </template>
          </el-table-column>
        </el-table>
        <!--     分页功能       -->
        <div class="pagination">
          <el-pagination
            background
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="[5, 10, 20]"
            :page-size="pagesize"
            layout="total, jumper, prev, pager, next, sizes"
            :total="listcount">
          </el-pagination>
        </div>
      </div>

      <div class="jump2list" id="deviceSet" :style="display2">
        功能正在开发中。。。
      </div>
      </el-container>

      <!-- 添加设备的对话框 -->
      <div>
        <el-dialog
          title="添加设备"
          width="800px"
          :visible.sync="addModal"
          :before-close="handleCloseAddModal"
        >
          <div class="form">

            <el-alert title="特别说明" description="这里放置说明内容" type="warning" show-icon></el-alert>
              <el-form
                :inline="true"
                :model="form"
                class="demo-form-inline"
                label-width="80px"
                ref="form"
              >
              <div>
                <el-form-item
                  label="设备类型"
                  prop="value"
                  :rules="[  { required: true, message: '不能为空'}, ]"
                >
                  <el-select v-model="form.value" placeholder="设备类型">
                    <el-option
                      v-for="item in form.deviceCategory"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    ></el-option>
                  </el-select>
                </el-form-item>

                <el-form-item label="设备编号" prop="name">
                  <el-input v-model="form.deviceId" placeholder="设备编号" type="number"></el-input>
                </el-form-item>
              </div>
              <div>
                <el-form-item label="设备名称" prop="name">
                  <el-input v-model="form.deviceName" placeholder="设备名称"></el-input>
                </el-form-item>
                <el-form-item label="优先级" prop="devicePriority">
                  <el-input-number v-model="form.devicePriority" placeholder="输入1~10"  max:10 min:1></el-input-number>
                </el-form-item>
              </div>
            </el-form>
          </div>
          <div slot="footer" class="dialog-footer">
            <el-button type="primary" @click="sureAddModal">确定</el-button>
            <el-button @click="addModal = false">取消</el-button>
          </div>
        </el-dialog>
      </div>

    </el-container>
</template>

<style lang="scss" scoped>

  @import "../styles/variables.scss";
  .form {
    background: #fff;

    .demo-form-inline {
      width: 700px;
      margin: auto;
      padding-top: 60px;
      padding-bottom: 60px;
    }
  }
  .btnadd{
    margin-left: 20px;
    margin-bottom: 20px;
  }

  .pagination {
    margin-top: 20px;
  }
  .profile {
    display: flex;
    justify-content: space-around;
    margin-bottom: 40px;
    border-bottom: 1px solid #ddd;
    padding-bottom: 20px;

    .item {
      width: 100%;
      text-align: center;
      margin-top: 20px;
      border-right: 1px solid #ddd;

      .small {
      }

      .strong {
        margin-top: 10px;
        font-size: 20px;
      }

      &:last-child {
        border-right: none;
      }
    }
  }
</style>
<script>
import axios from 'axios';
export default {
  data() {
    return {
      isCollapse: true,
      display1: "display:none",
      display2: "display:none",
      addModal: false,
      devicelist: [],
      newDevice: '',
      form: {
        deviceId: 0,
        uuid: '',
        deviceName:'',
        devicePriority: 0,
        deviceCategory: [
          {
            value: 0,
            label: 'Camera'
          }, {
            value: 1,
            label: 'Sensor'
          }
        ],
        value:0,
      },
      devicesNum:{
        alldevice:0,
        offlinedevice:0,
        activedevice:0
      },

      stripe:false,//是否为斑马纹 table
      //分页设置
      currentPage:1,
      pagesize:5,
      listcount:0,
    };
  },
  components: {
  },
  created() {
    this.showData();
  },
  methods: {

    handleStop(index,row){

    },
    handleOpen(key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    },

    handleSizeChange(val) {
      this.pagesize=val;
    },
    handleCurrentChange(val) {
      this.currentPage = val;
    },

    list1() {
      this.display2 = "display:none"
      this.display1 = ""
    },
    list2() {
      this.display1 = "display:none"
      this.display2 = ""
    },
    handleCloseAddModal() {
      this.addModal=false;
    },
    handleStop(index,row){
      let uuidvar = row["uuid"];
      axios({
        url:"http://localhost:8082/device/stop",
        method:'post',
        data: uuidvar,
        headers: {
          'Content-Type': 'text/plain'
        },
      }).then(result => {
        this.showData;
        console.log(result);
      }
      )
      this.showData();
    },
    handleDelete(index,row){
      let uuidvar = row["uuid"];
      axios({
        url:"http://localhost:8082/device/delete",
        method:'post',
        data: uuidvar,
        headers: {
          'Content-Type': 'text/plain'
        },
      }).then(result => {
        //必须要求回调！否则会造成组件不显示！
          console.log(result);
          this.showData;
      }
      )
    },
    sureAddModal() {
      console.log(1,this.form);
      axios({
        url:"http://localhost:8082/device/invoke",
        method:'post',
        contentType:"application/json",
        data:{
          deviceId:this.form.deviceId,
          deviceName:this.form.deviceName,
          devicePriority:this.form.devicePriority,
          deviceCategory:this.form.deviceCategory[this.form.value].label,
        },
      }).then(res=>{
        console.log(res)
        this.showData();
        this.addModal=false;
      })
    },

    showData: function () {
      axios({
        url: "http://localhost:8082/device/index",
        method: 'post',
      }).then(res => {
        //this.devicelist=res.data;
        //console.log(1,this.devicelist);
        this.devicelist = [];
        this.devicesNum.alldevice=0;
        let temp = 0;
        for (let i in res.data) {
          this.devicelist.push(res.data[i]);
          this.devicesNum.alldevice++;
          if(res.data[i].deviceStatus==='offline')
            temp=temp++;
        }
        this.devicesNum.offlinedevice=temp;
        this.listcount=this.devicesNum.alldevice;
        this.devicesNum.activedevice=this.devicesNum.alldevice-temp;

      });
    }
  }
}
</script>
